<template>
  <div class="right-timelime">
    <el-row class="flex">
      <el-radio-group v-model="siteStatus.isCurrentPage" size="small" class="margin-right-20" @change="onChangeAttrs">
        <el-radio-button :label="true">当前页</el-radio-button>
        <el-radio-button :label="false">全局页面设置</el-radio-button>
      </el-radio-group>
      <div class="margin-left-100">
        <el-checkbox v-model="siteAttrs.isPeripheralVisible" @change="onChangeAttrs">外围可见</el-checkbox>
        <el-checkbox v-if="isVisiblePhone" v-model="siteAttrs.isVisiblePhone" @change="onChangeAttrs">显示手机</el-checkbox>
        <el-checkbox v-else v-model="siteAttrs.isVisiblePhone" @change="onChangeAttrs" disabled>显示手机</el-checkbox>
      </div>
      <a href="https://www.yuque.com/volcaner/bq7g2d/001" target="_blank" class="help">帮助</a>
      <i v-if="siteStatus.isHighComponentConfiguration" class="jy-icon-down btn-fold" @click.stop="onFold"></i>
      <!-- <el-button class="margin-left-10" v-if="isDebug" @click.stop="onSaveCompData" size="small">保存组件数据</el-button> -->
    </el-row>
    <el-form class="el-form-item">
      <ul class="component-layer" v-if="state.isOpen && siteStatus.isHighComponentConfiguration" 
      @keydown.shift.exact="onKeyDownShift"
      @keyup.shift.exact="onKeyUpShift"
      tabindex="0">
        <li v-for="(item_, id) in getLayerAttrs" :key="id" @click.stop="onSelected(id)"
          :class="item_.isSelected ? 'seleted' : ''">
          <i :class="item_.isHidden ? 'jy-icon-view':'jy-icon-preview'" @click.stop="onEye(id)"></i>
          <i :class="item_.isLock ? 'jy-icon-locking':'jy-icon-unlock'" @click.stop="onLock(id)"></i>
          <span class="component-name"> {{item_.name}} </span>
          <input v-model="item_.id" class="timeline-input">
          <span class="component-text"> {{item_.text}} </span>
          <el-button class="btn-delete" type="primary" @click.stop.prevent="onDeleteComponent(id)">删除组件</el-button>
        </li>
      </ul>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { H5_TYPE, PAGE_TYPE } from '@/const/'
import { useWebSiteStore } from '@/store/web/site'
import { useWebComponentStore } from '@/store/web/component'
import { useWebPageStore } from '@/store/web/page'

const state =  reactive({
  isOpen: false,
  layerAttrs: {}
})
const useWebSite = useWebSiteStore()
const useWebPage = useWebPageStore()
const useWebComponent = useWebComponentStore()

const currentComponentData = useWebComponent.currentComponentData
const components = useWebPage.currentPage?.components
const siteAttrs = computed(() => {
  return useWebSite.attrs
})
const siteStatus = computed(() => {
  return useWebSite.siteStatus
})
const isVisiblePhone = computed(() => {
  const siteAttrs = useWebSite.attrs
  if(siteAttrs.h5Type == H5_TYPE.pc || siteAttrs.h5Type == H5_TYPE.canvas) {
    return false
  } else {
    if(siteAttrs.pageType == PAGE_TYPE.single) {
      return true
    } else {
      return false
    }
  }
})
const getLayerAttrs = computed(() => {
  const components = useWebPage.currentPage?.components
  const layerAttrs_ = _.cloneDeep(state.layerAttrs)
  _.forEach(state.layerAttrs, (item: any, key: string) => {
    delete state.layerAttrs[key]
  })
  _.forEach(components, (componnentData: IComponent) => {
    if(!layerAttrs_.hasOwnProperty(componnentData.id)) {
      const commonAttr = componnentData.commonAttr
      let text = commonAttr.name || commonAttr.text || commonAttr.title || ''
      text = text.substr(0, 8)
      if(!text) {
        text = componnentData.title
      }
      state.layerAttrs[componnentData.id] = {
        isSelected: false, 
        isHidden: false,
        isLock: false,
        name: componnentData.name,
        id: componnentData.id,
        text,
      }
    } else {
      state.layerAttrs[componnentData.id] = layerAttrs_[componnentData.id]
    }
  })
  return state.layerAttrs
})

// const onSaveCompData = () => {
//   const currentComponentData = useWebComponent.currentComponentData
//   if(currentComponentData) {
//     let compData = JSON.stringify(currentComponentData)
//     let blob = new Blob([compData], {type: "text/plain;charset=utf-8"})
//     window.saveAs(blob, "jianye-comp-data.json");
//   }else {
//     this.$message("亲，你没有选中组件！")
//   }
// }
const onKeyDownShift = () => {
  useWebSite.updateKeyDownShift(true)
  useWebSite.updateShiftComponents(true)
}
const onKeyUpShift = () => {
  useWebSite.updateKeyDownShift(false)
  useWebSite.updateShiftComponents(false)
}
const onDeleteComponent = (id: string) => {
  useWebPage.removeComponentById(id)
}
const onChangeAttrs = () => {
  // useWebSite.updateSiteAttrs(useWebSite.attrs)
}
const onFold = () => {
  state.isOpen = !state.isOpen
}
const onSelected = (id: string) => {
  if(state.layerAttrs[id].isLock) {
    return
  }
  setSelected(id)
  if(state.layerAttrs[id].isSelected){
    useWebComponent.setActiveComponentId(id)
  }else{
    useWebComponent.setActiveComponentId()
  }
}
const setSelected = (id: string) => {
  _.forEach(state.layerAttrs, (item: any) => {
    item.isSelected = false
  })
  state.layerAttrs[id].isSelected = !state.layerAttrs[id].isSelected
}
const onEye = (id: string) => {
  state.layerAttrs[id].isHidden = !state.layerAttrs[id].isHidden
  useWebPage.setComponentFrontAttr({ id, attr: { isHidden: state.layerAttrs[id].isHidden } })
}
const onLock = (id: string) => {
  state.layerAttrs[id].isLock = !state.layerAttrs[id].isLock
  if(!state.layerAttrs[id].isLock) {
    useWebComponent.setActiveComponentId(id)
  } else {
    useWebComponent.setActiveComponentId()
  }
  useWebPage.setComponentFrontAttr({ id, attr: { isLock:state.layerAttrs[id].isLock } })
}
</script>

<style lang="scss">
.right-timelime {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: left;
  background-color: #f3f5fa;
  padding: 4px 0;

  .el-form-item{
    margin: 0;
    padding: 0;
  }

  i{
    margin-right: 10px;
    font-size: 16px;
  }

  .timeline-input, .timeline-input-title{
    width: 260px;
    display: inline-block;
    padding: 0 4px;
    font-size: 12px;
    text-align: center;
    margin: 0 10px
  }
  .timeline-input-title{
    width: 160px;
  }

  .flex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: 26px;
  }
  .btn-fold {
    font-size: 8px;
    display: inline-block;
    line-height: 2.4;
    align-self:flex-end;
    margin-left: 30px
  }
  .help {
    font-size: 12px;
    display: inline-block;
    line-height: 2.4;
    margin-left: 30px;
  }
  .btn-copy{
    margin-left: 20px;
  }

  .el-button {
    padding: 6px 18px;
    border-radius: 0;
    font-size: 12px;
  }
  .el-radio-button:first-child .el-radio-button__inner,
  .el-radio-button:last-child .el-radio-button__inner,
  .el-radio-button__inner,
  .el-checkbox-button:first-child .el-checkbox-button__inner,
  .el-checkbox-button:last-child .el-checkbox-button__inner{
    padding: 8px 18px;
    font-size: 12px;
  }
  .el-radio-button:first-child .el-radio-button__inner{
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;

  }
  .el-radio-button:last-child .el-radio-button__inner{
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;

  }
  .margin-left-100{
    margin-left: 100px;
  }
  
  .el-checkbox{
    line-height: 30px;
  }

  .component-layer{
    width: 100%;
    margin-top: 8px;
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: #fff;
    max-height: 200px;
    overflow-y: auto;

    .btn-delete{
      margin-left: 20px;
    }

    li{
      margin: 4px;
      background-color: #f3f5fa;
      padding: 2px 4px;
      position: relative;
      line-height: 28px;
      display: flex;
      justify-items: flex-end;
      justify-content: flex-end;
      align-items: center;

      span{
        font-size: 12px;
      }

      .component-name{
        width: 70px;
      }
      .component-text{
        width: 140px;
      }
    }
    li.seleted{
      background-color: aquamarine;
    }
  }
  
}
</style>
